
<!-- eslint-disable space-before-function-paren -->
<!--
 * @Descripttion:
 * @version:
 * @Author: ZhangXue
 * @Date: 2021-07-29 14:43:09
 * @LastEditors: ZhangXue
 * @LastEditTime: 2021-08-19 09:51:46
-->
<template>
  <div class="fd-home-body">
    <!-- 头部内容 开始 -->
    <div class="fd-header-box">
      <div class="fd-logo">
        <span>新冠疫情统计地图</span>
      </div>
    </div>
    <div class="fd-update-time">最后更新时间：{{ updateTime }}</div>
    <!-- 头部内容 结束 -->
    <!-- 下面内容 开始 -->
    <div class="fd-content-box">
      <div class="fd-main-content">
        <!-- 左边部分 开始 -->
        <div class="fd-left-part">
          <!-- 疫情概况 开始 -->
          <div class="fd-third-item">
            <light-title title="疫情概况"></light-title>
            <div class="fd-chart-box">
              <ul class="fd-icon-list">
                <li class="fd-icon-item ljqz">
                  <p class="fd-num">{{ epidemicData.confirmedTotal }}</p>
                  <p class="fd-name">累计确诊</p>
                </li>
                <li class="fd-icon-item xyqz">
                  <p class="fd-num">{{ epidemicData.existingConfirmed }} </p>
                  <p class="fd-name">现有确诊</p>
                </li>
                <li class="fd-icon-item zy">
                  <p class="fd-num">{{ epidemicData.cure }} </p>
                  <p class="fd-name">治愈</p>
                </li>
                <li class="fd-icon-item sw">
                  <p class="fd-num">{{ epidemicData.death }}</p>
                  <p class="fd-name">死亡</p>
                </li>
                <li class="fd-icon-item zz">
                  <p class="fd-num">{{ epidemicData.nowSevere }} </p>
                  <p class="fd-name">重症</p>
                </li>
                <li class="fd-icon-item jwsr">
                  <p class="fd-num">{{ epidemicData.importedCase }} </p>
                  <p class="fd-name">境外输入</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 疫情概况 结束 -->
          <!-- 今日疫情 开始 -->
          <div class="fd-third-item sort">
            <light-title title="今日疫情"></light-title>
            <div class="fd-chart-box">
              <ul class="fd-icon-box">
                <li class="fd-icon-part jrxz">
                  <p class="fd-name">今日新增</p>
                  <p class="fd-num">{{ todaySituation.confirm }}</p>
                </li>
                <li class="fd-icon-part jrzy">
                  <p class="fd-name">今日治愈</p>
                  <p class="fd-num">{{ todaySituation.heal }}</p>
                </li>
                <li class="fd-icon-part jrzz">
                  <p class="fd-name">今日重症</p>
                  <p class="fd-num">{{ todaySituation.nowSevere || '--' }}</p>
                </li>
                <li class="fd-icon-part jrsw">
                  <p class="fd-name">今日死亡</p>
                  <p class="fd-num">{{ todaySituation.dead }}</p>
                </li>
                <li class="fd-icon-part jrjwsr">
                  <p class="fd-name">境外输入</p>
                  <p class="fd-num">{{ todaySituation.importedCase }}</p>
                </li>
                <li class="fd-icon-part wzz">
                  <p class="fd-name">无症状感染</p>
                  <p class="fd-num">{{ todaySituation.noInfect || '--' }}</p>
                </li>
              </ul>
            </div>
          </div>
          <!-- 今日疫情 结束 -->
          <!-- 病例分布 开始 -->
          <div class="fd-third-item">
            <light-title title="病例分布"></light-title>
            <div class="fd-chart-box">
              <div class="fd-height-100 fd-width-100" v-if="illPieOption.series[0].data.length">
                <draw-chart id="appDownload" :options="illPieOption"></draw-chart>
              </div>
              <div class="fd-zwsj" v-if="!illPieOption.series[0].data.length">暂无数据</div>
            </div>
          </div>
          <!-- 病例分布 结束 -->
        </div>
        <!-- 左边部分 结束 -->
        <!-- 中间部分 开始 -->
        <div class="fd-center-part">
          <!-- 上部分内容 开始 -->
          <div class="fd-center-top">
            <div class="fd-chart-box fd-mt10">
              <div class="fd-height-100 fd-width-100">
                <div id="map" class="fd-width-100 fd-height-100"></div>
              </div>
              <!-- <div class="fd-zwsj" v-if="!top8Option.series[0].data.length">暂无数据</div> -->
            </div>
          </div>
          <!-- 上部分内容 结束 -->
          <!-- 下部分内容 开始 -->
          <div class="fd-center-bottom">
            <div class="fd-bottom-title">现有确诊前八省份</div>
            <div class="fd-chart-box fd-mt10">
              <div class="fd-height-100 fd-width-100" v-if="top8Option.series[0].data.length">
                <draw-chart id="top8Option" :options="top8Option"></draw-chart>
              </div>
              <div class="fd-zwsj" v-if="!top8Option.series[0].data.length">暂无数据</div>
            </div>
          </div>
          <!-- 下部分内容 结束 -->
        </div>
        <!-- 中间部分 结束 -->
        <!-- 右边部分 开始 -->
        <div class="fd-right-part">
          <!-- 今日疫情动态 开始 -->
          <div class="fd-right-top">
            <light-title title="今日疫情动态"></light-title>
            <div class="fd-chart-box">
              <ul class="fd-skenton-list">
                <li class="fd-skenton-item" v-for="(skenton, index) in skeletonList" :key="index + 'sketon'">
                  <div class="fd-info-text">
                    <span>{{ skenton.siteName }}</span>&nbsp;&nbsp;&nbsp;{{ $global.translateTime(skenton.eventTime *
                        1000)
                    }}
                  </div>
                  <div class="fd-text-box"><a :href="skenton.eventUrl" :title="skenton.eventDescription">{{
                      skenton.eventDescription
                  }}</a></div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 今日疫情动态 结束 -->
          <!-- 确诊趋势图 开始 -->
          <div class="fd-right-bottom">
            <light-title title="确诊趋势图"></light-title>
            <div class="fd-chart-box fd-mt10">
              <div class="fd-height-100 fd-width-100" v-if="lineOption.series[0].data.length">
                <draw-chart id="lineOption" :options="lineOption"></draw-chart>
              </div>
              <div class="fd-zwsj" v-if="!lineOption.series[0].data.length">暂无数据</div>
            </div>
          </div>
          <!-- 确诊趋势图 结束 -->
        </div>
        <!-- 右边部分 结束 -->
      </div>
    </div>
    <!-- 下面内容 结束 -->
  </div>
</template>
<script>
import { jsonp } from "vue-jsonp";
// 引入标题组件
import lightTitle from "@/components/common/lightTitle";
// 引入echarts组件
import drawChart from "@/components/common/drawCharts";
import charts from "@/assets/js/common/charts.js";
const echarts = require("echarts");
export default {
  name: "areaDistribution",
  components: { lightTitle, drawChart },
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      form: {
        area: "四川"
      },
      proviceList: [{
        "ProID": 1,
        "name": "北京"
      }, {
        "ProID": 2,
        "name": "天津"
      }, {
        "ProID": 3,
        "name": "河北"
      }, {
        "ProID": 4,
        "name": "山西"
      }, {
        "ProID": 5,
        "name": "内蒙古"
      }, {
        "ProID": 6,
        "name": "辽宁"
      }, {
        "ProID": 7,
        "name": "吉林"
      }, {
        "ProID": 8,
        "name": "黑龙江"
      }, {
        "ProID": 9,
        "name": "上海"
      }, {
        "ProID": 10,
        "name": "江苏"
      }, {
        "ProID": 11,
        "name": "浙江"
      }, {
        "ProID": 12,
        "name": "安徽"
      }, {
        "ProID": 13,
        "name": "福建"
      }, {
        "ProID": 14,
        "name": "江西"
      }, {
        "ProID": 15,
        "name": "山东"
      }, {
        "ProID": 16,
        "name": "河南"
      }, {
        "ProID": 17,
        "name": "湖北"
      }, {
        "ProID": 18,
        "name": "湖南"
      }, {
        "ProID": 19,
        "name": "广东"
      }, {
        "ProID": 20,
        "name": "海南"
      }, {
        "ProID": 21,
        "name": "广西"
      }, {
        "ProID": 22,
        "name": "甘肃"
      }, {
        "ProID": 23,
        "name": "陕西"
      }, {
        "ProID": 24,
        "name": "新疆"
      }, {
        "ProID": 25,
        "name": "青海"
      }, {
        "ProID": 26,
        "name": "宁夏"
      }, {
        "ProID": 27,
        "name": "重庆"
      }, {
        "ProID": 28,
        "name": "四川"
      }, {
        "ProID": 29,
        "name": "贵州"
      }, {
        "ProID": 30,
        "name": "云南"
      }, {
        "ProID": 31,
        "name": "西藏"
      }, {
        "ProID": 32,
        "name": "台湾"
      }, {
        "ProID": 33,
        "name": "澳门"
      }, {
        "ProID": 34,
        "name": "香港"
      }],
      // 数据更新时间
      updateTime: "",
      // 疫情概况数据
      epidemicData: {
        // 累计确诊
        confirmedTotal: null,
        // 现有确诊
        existingConfirmed: null,
        // 治愈
        cure: null,
        // 死亡
        death: null,
        // 境外输入
        importedCase: null,
        // 重症
        nowSevere: null
      },
      // 今日概况数据
      todaySituation: {
        // 今日新增
        confirm: null,
        // 今日治愈
        heal: null,
        // 今日重症
        nowSevere: null,
        // 今日死亡
        dead: null,
        // 境外输入
        importedCase: null,
        // 无症状感染
        noInfect: null
      },
      // 病例分布
      illPieOption: this._.cloneDeep(charts.pieOption),
      // 全国数据
      chinaData: [],
      // 现有确诊前八省份
      confirmTop8: [],
      top8Option: this._.cloneDeep(charts.barOption),
      // 确诊趋势图
      lineOption: this._.cloneDeep(charts.lineOption),
      // 地图对象
      myChart: null,
      mapOptions: this._.cloneDeep(charts.mapOption),
      // 当前的index
      tooltipIndex: 0,
      // 上一次高亮的index
      tooltipIndexBefore: 0,
      // 定时器对象
      timer: null,
      // 时间脉络列表数据
      skeletonList: [],
      // 30天内确诊趋势
      comfirmList: {
        date: [],
        value: []
      }
    };
  },
  // eslint-disable-next-line space-before-function-paren
  created() {
    this.requestChinaData();
    this.requestSkeleton();
    this.requestAreaData();
  },
  methods: {
    /* 选择省份发生改变*/
    // eslint-disable-next-line space-before-function-paren
    areaChange() {
      this.requestAreaData();
    },
    /* 请求指定省份的疫情概况*/
    // eslint-disable-next-line space-before-function-paren
    requestAreaData() {
      const _url = "https://voice.baidu.com/newpneumonia/getv2?target=trend&isCaseIn=1&from=mola-virus&stage=publish&area=" + this.form.area;
      // 可选择省份;
      jsonp(_url).then(res => {
        console.log("jsonp", res);
        if (res.msg === "success") {
          const _index = res.data[0].trend.updateDate.length - 1;
          this.updateTime = res.data[0].trend.updateDate[_index];
          this.epidemicData.confirmedTotal = res.data[0].trend.list[0].data[_index];
          this.epidemicData.cure = res.data[0].trend.list[1].data[_index];
          this.epidemicData.death = res.data[0].trend.list[2].data[_index];
          this.epidemicData.newlyConfirmed = res.data[0].trend.list[3].data[_index];
          this.epidemicData.confirmedNum = this.epidemicData.confirmedTotal - this.epidemicData.cure - this.epidemicData.death;
        }
      }).catch(() => {
      });
    },
    /* 获取全国疫情动态脉络数据 */
    // eslint-disable-next-line space-before-function-paren
    requestSkeleton() {
      // const _url = "https://opendata.baidu.com/data/inner?tn=reserved_all_res_tn&dspName=iphone&from_sf=1&dsp=iphone&resource_id=28565&alr=1&query=%E5%9B%BD%E5%86%85%E6%96%B0%E5%9E%8B%E8%82%BA%E7%82%8E%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81";
      const _url = "/skeleton/data/inner?tn=reserved_all_res_tn&dspName=iphone&from_sf=1&dsp=iphone&resource_id=28565&alr=1&query=%E5%9B%BD%E5%86%85%E6%96%B0%E5%9E%8B%E8%82%BA%E7%82%8E%E6%9C%80%E6%96%B0%E5%8A%A8%E6%80%81";

      this.$axios.get(_url).then(res => {
        this.skeletonList = res.Result[0].items_v2[0].aladdin_res.DisplayData.result.items.slice(0, 5);
        console.log("skeleton", this.skeletonList);
      }).catch(err => {
        console.log("err", err);
      });
    },
    // 请求全国数据
    // eslint-disable-next-line space-before-function-paren
    requestChinaData() {
      const _url = "/healthApi/ug/api/wuhan/app/data/list-total";
      // const _url = "healthApi/service/data/ncov-live-3";   get请求
      this.$axios.get(_url).then(res => {
        if (res.data) {
          const _data = res.data;
          console.log(_data);
          //  http://c.m.163.com/ug/api/wuhan/app/data/list-total
          /* 疫情概况数据赋值 */
          this.updateTime = _data.lastUpdateTime;
          // 累计确诊
          this.epidemicData.confirmedTotal = _data.chinaTotal.total.confirm;
          // 现有确诊
          this.epidemicData.existingConfirmed = _data.chinaTotal.total.confirm - _data.chinaTotal.total.heal - _data.chinaTotal.total.dead;
          // 治愈
          this.epidemicData.cure = _data.chinaTotal.total.heal;
          // 死亡
          this.epidemicData.death = _data.chinaTotal.total.dead;
          // 重症
          this.epidemicData.nowSevere = _data.chinaTotal.total.severe;
          // 境外输入
          this.epidemicData.importedCase = _data.chinaTotal.total.input;
          /* 今日概况数据赋值 */
          // 今日新增
          this.todaySituation.confirm = _data.chinaTotal.today.confirm;
          // 今日治愈
          this.todaySituation.heal = _data.chinaTotal.today.heal;
          // 今日重症
          this.todaySituation.nowSevere = _data.chinaTotal.today.severe;
          // 今日死亡
          this.todaySituation.dead = _data.chinaTotal.today.dead;
          // 今日境外输入
          this.todaySituation.importedCase = _data.chinaTotal.today.input;
          // 今日无症状感染
          this.todaySituation.noInfect = _data.chinaTotal.today.suspect;

          this.drawIllPie();

          // 获取全国数据
          console.log("_data.areaTree[2].children", _data.areaTree[2].children);

          _data.areaTree[2].children.forEach(val => {
            const obj = {
              name: val.name,
              // 现有确诊
              nowConfirm: val.total.confirm - val.total.heal - val.total.dead,
              // 累计确诊
              confirm: val.total.confirm,
              // 死亡
              dead: val.total.dead,
              // 死亡率
              deadRate: val.total.dead / val.total.confirm,
              // 治愈
              heal: val.total.heal,
              value: val.today.confirm
            };
            this.chinaData.push(obj);
          });
          // 读取30天内的确诊数据
          const num = _data.chinaDayList.length;
          const _arr = _data.chinaDayList.slice(num - 30, num);
          this.comfirmList.date = [];
          this.comfirmList.value = [];
          _arr.forEach(val => {
            this.comfirmList.date.push(val.date);
            this.comfirmList.value.push(val.total.confirm);
          });
          this.$nextTick(() => {
            this.initMap();
            this.drawTop8Bar();
            this.drawLine();
          });
        }
      }).catch(err => {
        console.log("err", err);
      });
    },
    /* 绘制病例分布饼图 */
    // eslint-disable-next-line space-before-function-paren
    drawIllPie() {
      const value = [
        {
          name: "现有确诊",
          value: this.epidemicData.existingConfirmed
        }, {
          name: "治愈",
          value: this.epidemicData.cure
        }, {
          name: "死亡",
          value: this.epidemicData.death
        }
      ];
      this.illPieOption.series[0].data = value;
      this.illPieOption.series[0].radius = ["40%", "70%"];
      this.illPieOption.series[0].center = ["50%", "40%"];
      this.illPieOption.title.subtext = this.epidemicData.confirmedTotal;
      this.illPieOption.title.top = "25%";
    },
    /* 绘制确诊前八省份柱状图 */
    // eslint-disable-next-line space-before-function-paren
    drawTop8Bar() {
      // 数组根据对象里面某个元素进行排序
      this.chinaData.sort(this.sortNumber);
      const _arr = JSON.parse(JSON.stringify(this.chinaData));
      this.confirmTop8 = _arr.splice(0, 8);
      const _xData = [];
      const _yData = [];
      const _maxData = [];
      this.confirmTop8.forEach(val => {
        _yData.push(val.nowConfirm);
        _xData.push(val.name);
        _maxData.push(this.confirmTop8[0].nowConfirm);
      });
      this.top8Option.xAxis.data = _xData;
      this.top8Option.xAxis.axisLabel.rotate = 0;
      this.top8Option.series[0].data = _yData;
      this.top8Option.series[1].data = _maxData;
      this.top8Option.series[0].itemStyle.color.colorStops[0].color = "#48da97";
      this.top8Option.series[0].itemStyle.color.colorStops[1].color = "#098b4f";
      this.top8Option.series[1].silent = true;
    },
    /* 排序规则函数 */
    // eslint-disable-next-line space-before-function-paren
    sortNumber(a, b) {
      return b.nowConfirm - a.nowConfirm;
    },
    /**
       * 初始化地图
       * */
    // eslint-disable-next-line space-before-function-paren
    initMap() {
      const _this = this;
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById("map"));
        const _url = "../../../static/json/china.json";
        this.$axios.get(_url).then(geoJson => {
          echarts.registerMap("china", geoJson);
          // eslint-disable-next-line space-before-function-paren
          _this.mapOptions.tooltip.formatter = function(params) {
            _this.tooltipIndex = params.dataIndex;
            // 取消上一个高亮的城市
            _this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: _this.tooltipIndexBefore
            });
            let html = "";
            if (params.data) {
              html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>" + params.marker + "&nbsp;&nbsp;现有确诊" + params.data.value + "&nbsp;&nbsp;" +
                "</p><p>" + params.marker + "&nbsp;&nbsp;累计确诊" + params.data.confirm + "&nbsp;&nbsp;" + "</p></div>";
            } else {
              html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>暂无数据</p></div>";
            }
            return html;
          };
          _this.mapOptions.series[0].data = _this.chinaData;

          _this.mapOptions.visualMap.max = _this.chinaData[0].value;
          _this.myChart.setOption(_this.mapOptions, true);
          // 设置定时器
          if (_this.timer) {
            clearInterval(_this.timer);
            _this.timer = null;
          }
          _this.timer = setInterval(() => {
            _this.myChart.dispatchAction({
              type: "showTip", // 根据 tooltip 的配置项显示提示框。
              seriesIndex: 0,
              dataIndex: _this.tooltipIndex
            });
            // 如果不是第一个，在高亮之前取消上一个的高亮状态
            _this.myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: _this.tooltipIndexBefore
            });
            // 设置当前index为高亮状态
            _this.myChart.dispatchAction({
              type: "highlight",
              seriesIndex: 0,
              dataIndex: _this.tooltipIndex
            });
            _this.tooltipIndexBefore = _this.tooltipIndex;
            _this.tooltipIndex++;
            if (_this.tooltipIndex > (_this.chinaData.length - 1)) {
              _this.tooltipIndex = 0;
            }
          }, 3000);
        });
      } else {
        _this.myChart.setOption(_this.mapOptions, true);
      }
    },
    // 绘制疫情30天趋势图
    // eslint-disable-next-line space-before-function-paren
    drawLine() {
      this.lineOption.series[0].data = this.comfirmList.value;
      this.lineOption.xAxis.data = this.comfirmList.date;
    }
  }
};
</script>
<style lang="less" scoped>
.fd-update-time {
  position: absolute;
  right: 40px;
  top: 85px;
  color: #0078ff;
}

.fd-center-part {
  width: 746px;
  height: 918px;

  .fd-center-top {
    position: relative;
    width: 100%;
    height: 629px;
    padding-top: 94px;
    background: url("../../../static/image/common/center-box-bg.png") center bottom no-repeat;
  }

  .fd-center-bottom {
    position: relative;
    top: -48px;
    width: 100%;
    height: 333px;
    background: url("../../../static/image/common/center-rect-bg.png") center no-repeat;
    padding: 50px 64px 0;

    .fd-bottom-title {
      position: absolute;
      width: 100%;
      height: 50px;
      top: 0;
      left: 0;
      background: url("@{imgUrl}/common/center-title-bg.png") center no-repeat;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #fff;
      line-height: 50px;
    }
  }
}

.fd-right-top {
  width: 100%;
  padding: 24px 30px 0;
  height: 60%;
}

.fd-right-bottom {
  width: 100%;
  padding: 24px 30px 0 58px;
  height: 40%;
}

// 疫情概况icon样式
.fd-icon-list {
  width: 100%;
  font-size: 0;
  text-align: left;
  padding-top: 50px;

  .fd-icon-item {
    display: inline-block;
    width: 32%;
    height: 60px;
    padding-left: 60px;
    text-align: left;
    margin-right: 2%;
    padding-top: 5px;

    &:nth-child(3n+3) {
      margin-right: 0;
    }

    &:nth-child(-n+3) {
      margin-bottom: 40px;
    }

    &.ljqz {
      background: url("@{imgUrl}/area/icon-ljqz.png") left center no-repeat;
    }

    &.xyqz {
      background: url("@{imgUrl}/area/icon-xyqz.png") left center no-repeat;

      .fd-num {
        color: #0de793;
      }
    }

    &.zy {
      background: url("@{imgUrl}/area/icon-zy.png") left center no-repeat;

      .fd-num {
        color: #d9f125;
      }
    }

    &.sw {
      background: url("@{imgUrl}/area/icon-sw.png") left center no-repeat;

      .fd-num {
        color: #167ef2;
      }
    }

    &.zz {
      background: url("@{imgUrl}/area/icon-zz.png") left center no-repeat;

      .fd-num {
        color: #ff5b3a;
      }
    }

    &.jwsr {
      background: url("@{imgUrl}/area/icon-jwsr.png") left center no-repeat;

      .fd-num {
        color: #f4bd3a;
      }
    }

    .fd-num {
      font-size: 22px;
      font-weight: bold;
      color: #01e0e6;
    }

    .fd-name {
      font-size: 14px;
      color: #fff;
      margin-top: 10px;
    }
  }
}

// 今日疫情icon盒子样式
.fd-icon-box {
  width: 100%;
  font-size: 0;
  text-align: left;
  padding-top: 20px;

  .fd-icon-part {
    display: inline-block;
    width: 47%;
    height: 68px;
    line-height: 68px;
    margin-right: 6%;
    margin-top: 10px;
    padding-left: 80px;

    &:nth-child(-n+2) {
      margin-top: 0;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    &.jrxz {
      background: url("@{imgUrl}/area/icon-jrxz.png") left center no-repeat;

      .fd-num {
        color: #00e1e5;
      }
    }

    &.jrzy {
      background: url("@{imgUrl}/area/icon-jrzy.png") left center no-repeat;

      .fd-num {
        color: #0de793;
      }
    }

    &.jrzz {
      background: url("@{imgUrl}/area/icon-jrzz.png") left center no-repeat;

      .fd-num {
        color: #ff5b3a;
      }
    }

    &.jrsw {
      background: url("@{imgUrl}/area/icon-jrsw.png") left center no-repeat;

      .fd-num {
        color: #167ef2;
      }
    }

    &.jrjwsr {
      background: url("@{imgUrl}/area/icon-jrjwsr.png") left center no-repeat;

      .fd-num {
        color: #f4bd3a;
      }
    }

    &.wzz {
      background: url("@{imgUrl}/area/icon-wzz.png") left center no-repeat;

      .fd-num {
        color: #d9f125;
      }
    }

    p {
      display: inline-block;
      width: 50%;

      &.fd-name {
        color: #fff;
        font-size: 14px;
      }

      &.fd-num {
        font-size: 22px;
        font-weight: bold;
      }
    }
  }
}

// 疫情脉络图样式
.fd-skenton-list {
  width: 100%;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 20px;

  .fd-skenton-item {
    width: 100%;
    height: 90px;
    padding-left: 30px;
    text-align: left;
    position: relative;

    &:before {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 4px;
      left: 5px;
      content: "";
      background: url("@{imgUrl}/area/icon-dote.png") center no-repeat;
      z-index: 1;
    }

    &:after {
      width: 1px;
      height: 100%;
      content: "";
      position: absolute;
      top: 9px;
      left: 12px;
      background: #0faeb5;
      z-index: 0;
    }

    .fd-info-text {
      font-size: 14px;
      color: #fff;
      padding-left: 15px;
      margin-bottom: 5px;
    }

    .fd-text-box {
      width: 100%;
      padding: 15px 10px;
      background: rgba(0, 213, 255, 0.2);
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      a {
        color: #00d5ff;
        cursor: pointer;
      }
    }
  }
}

.fd-home-body .fd-header-box {
  justify-content: center;

  .fd-logo {
    background: url("@{imgUrl}/common/icon-area.png") 85px center no-repeat;
    background-size: 40px auto;

  }
}
</style>
